{% include 'layout/layout_header.html' %}

<link rel="stylesheet" href="/static/css/tabTable.css?vsn=1">

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-body">
            <!-- 顶部导航区域 -->
            {% include 'layout/layout_nav.html' %}
            <!-- 左侧导航区域 -->
            {% include 'layout/layout_menu.html' %}
            <div id="tabTable-box" style="width:100%;height:99%;"></div>
            <!-- <iframe src="/adm/welcome" width="100%" height="100%" id="router-view" scrolling="auto" class="iframe" framborder="0"></iframe> -->
            <div class="layui-footer">
                <!-- 底部固定区域 -->
                底部固定区域
            </div>
        </div>
    </div>
</body>

{% include 'layout/layout_footer.html' %}

<!-- 模块化管理后台html模板布局，参考 https://sight-wcg.github.io/layui-theme-dark/ -->
<script type="text/javascript">
    var tabTableId = 'tabTable-box';
    layui.config({
        base: '/static/js/' // 业务模块所在目录
    }).use(['tabPage']);

    layui.use(['jquery', 'tabPage'], function () {
        var $ = layui.jquery;
        //头部事件
        layui.util.event('lay-header-event', {
            menuLeft: function(othis) { // 左侧菜单事件
                $('body').toggleClass('collapse');
                // layui.layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function() {   // 右侧菜单事件
                layui.layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
        // 初始化 menu tabTable
        MenuTabPage = layui.tabPage.render({
            elem: tabTableId
            , session: true
            , closeEvent:() => {
            }
        });
        // 点击刷新 iframe
        $(".layui-tab[lay-filter='tabTable-box'] .layui-tab-title li").click(function() {
            console.log($(this).attr("lay-id"))
            var id = $(this).attr("lay-id");
            sessionStorage.setItem(tabTableId + "-pear-tab-page-data-current", id);
            MenuTabPage.refresh(1);
        });
        var cid = sessionStorage.getItem(tabTableId + "-pear-tab-page-data-current");
        // sessionStorage.getItem("tabTable-box-pear-tab-page-data")
        if (!(cid > 0)) {
            MenuTabPage.changePage({
                id: 0
                , title: '首页'
                , type: "_iframe"
                , close: false
                , url: '/adm/welcome'
            });
        }
        //监听导航点击
        layui.element.on('nav(nav-side)', function (elem) {
            var path = elem.data('path');
            if (path) {
                MenuTabPage.changePage({
                    id: elem.data('id')
                    , title: $(elem).html()
                    , type: "_iframe"
                    , close: true
                    , url: path
                    , refresh: true
                });
                sessionStorage.setItem(tabTableId + "-pear-tab-page-data-current", elem.data('id'));
                // MenuTabPage.refresh(1);
            }
        });
    });
</script>
